<template>
    <div id="wrap-box">
        <img @click="$router.push('/')" class="return" src="./images/主页.png" />
        <img class="return msg" @click="showtip = !showtip" src="./images/留言纸.png" />
        <h1>大家的留言</h1>
        <div class="container">
            <div class="card" :class="item.css" v-for="(item, index) in wishList" :key="index">
                <div class="header">
                    <img class="close" @click="closeCard(index)" src="./images/ding.png" alt="close">
                </div>
                <el-image v-if="item.pic" style="width: 100px; height: 100px" :src="item.pic"
                    :preview-src-list="picList">
                </el-image>
                <div class="content">
                    {{ item.content }}
                </div>
                <div class="name">{{ item.name }}</div>
            </div>
        </div>
        <div class="form" v-show="showtip">
            <el-form ref="form" :rules="rules" label-position="left" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input id="firstName" v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="许愿吧" prop="content">
                    <el-input type="textarea" id="content" placeholder="请输入内容" v-model="form.content" show-word-limit
                        rows="4" resize="none"></el-input>
                </el-form-item>
                <el-form-item label="图片上传">
                    <el-upload ref="uploadRef" action="#" :limit="1" list-type="picture-card" :on-remove="handleRemove"
                        :on-change="getPic" :auto-upload="false">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button id="onSubmit" type="primary" @click="onSubmit">发布</el-button>
                    <el-button @click="onRest">重置</el-button>
                    <el-button @click="showtip = false">取消</el-button>
                </el-form-item>
            </el-form>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="form.pic" alt="">
            </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'Message',
    data() {
        return {
            wishList: [],
            form: {
                name: '',
                content: '',
                pic: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入留言内容', trigger: 'blur' },
                    { min: 1, max: 35, message: '长度在 1 到 35 个字符', trigger: 'blur' }
                ],
            },
            num: 1,
            picList: [],
            textarea: '',
            dialogVisible: false,
            disabled: false,
            showtip: false,
            file: '',
        }
    },
    mounted() {
        axios.get("/api/messages").then(val => {
            const { data } = val.data
            this.wishList = data.map(item => {
                item.pic = this.$host + item.pic;
                return item
            })
        })
    },
    methods: {
        // 提交方法
        onSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    /* 这里可以查看到自己的表单信息 */
                    let obj = this.form;
                    obj.css = 'item' + this.num;
                    this.num++;
                    if (this.num > 4) {
                        this.num = 1;
                    }

                    const form = new FormData()
                    form.append("name", this.form.name);
                    form.append("content", this.form.content);
                    form.append("css", obj.css);
                    const file = this.file;
                    console.log(file);
                    // 创建 FileReader 对象
                    const reader = new FileReader();

                    // 监听读取完成事件
                    reader.onloadend = () => {
                        // 读取完成后的回调函数
                        // console.log(base64Data); // 在控制台输出 Base64 数据

                        form.append('file', this.file);

                        // 在此处可以进行进一步操作，如将 Base64 数据显示在页面上或发送到服务器等
                        axios.post('/api/AddMessage', form, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        })
                    };

                    // 将文件以 DataURL 格式读取
                    reader.readAsDataURL(file);

                    this.wishList.push(obj)
                    this.form = {};
                    this.$refs.uploadRef.uploadFiles.pop()
                    //点击发布container消失
                    this.showtip = false;

                } else {
                    this.$message({
                        message: '提交错误！请检查输入内容',
                        type: 'warning'
                    });
                    return false;
                }
            });
        },
        // 关闭许愿卡
        closeCard(index) {
            this.wishList.splice(index, 1)
        },
        // 重置表单
        onRest() {
            this.$refs['form'].resetFields();
        },
        // 图片删除
        handleRemove(file) {
            let index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === file.uid);
            this.$refs.uploadRef.uploadFiles.splice(index, 1);
        },
        // 模拟上传图片
        getPic(e) {
            // console.log(e);//
            this.file = e.raw;
            this.form.pic = e.url;
            this.picList.push(e.url)
        },
        // 预览图片
        handlePictureCardPreview(file, fileList) {
            this.form.pic = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style scoped>
#wrap-box{
    height: 100vh;
    width: 100vw;
}
.container {
    display: flex;
    flex-wrap: wrap;
    overflow-y:scroll;
    height: 100%;
    padding: 30px 0;
}

.card {
    width: 250px;
    height: 250px;
    margin: 20px;
    padding: 10px;
    box-shadow: 0 2px 10px 1px #7f7f7f;
    border-bottom-left-radius: 20px 500px;
    border-bottom-right-radius: 500px 30px;
    border-top-right-radius: 5px 100px;
    font-family: '微软雅黑';
    letter-spacing: 2px;
}

.form {
    height: 450px;
    /* max-width: 100vw; */
    width: 100%;
    background-color: wheat;
    border-radius: 5px;
    padding: 25px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 100px;
    margin: auto;
    box-shadow: 0 4px 10px 1px bisque;
    box-sizing: border-box;
    padding: 20px;
}

@media screen and (min-width:600px){
    .card{
        width: 40%;
    }
    #wrap-box .form{
        width: 600px;
    }
}

h1 {
    line-height: 70px;
    text-align: center;
    color: wheat;
    letter-spacing: 10px;
}

.content {
    text-indent: 2em;
    padding-top: 5px;
    width: 100%;
}

.name {
    text-align: right;
    padding-top: 10px;
    padding-right: 20px;
    font-weight: bold;
}

.item1 {
    background-color: #6cde47;
}

.item2 {
    background-color: #42baec;
}

.item3 {
    background-color: #e3e197;
}

.item4 {
    background-color: #ecc733;
}

.header {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close {
    width: 30px;
    height: 30px;
    cursor: pointer;
}


img.return {
    position: absolute;
    z-index: 20;
    left: 10px;
    top: 10px;
    transition: .5s;
    cursor: pointer;
    width: 40px;
}

img.return:hover {
    transform: scale(1.5);
}

img.msg {
    left: auto;
    right: 20px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(255, 0, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(0, 0, 0, 0.1);
}
</style>